<template>
  <div id="print" style="overflow:auto" :style="{height:tableHeight + 'px'}">
    <a-row type="flex" class="menus">
      <a-button-group>
        <template v-for="demo in demoList">
          <a-button :type="demo.name === curDemo ? 'primary' : 'info'" @click="curDemo = demo.name" :key="demo.name">
            {{ demo.title }}
          </a-button>
        </template>
      </a-button-group>
      <div style="margin-left: 20px"/>
      <!-- <a-button style="width:30vw;font-size: 16px;" :type="'templates' === curDemo ? 'primary' : 'info'"
                icon="file-search"
                @click="curDemo = 'templates'">
        模 板 中 心
      </a-button> -->
    </a-row>
    <!-- 动态渲染组件，懒得去弄路由了 -->
    <keep-alive>
      <component :is="curDemo" :printData="printData" :billType="billType"
        :rateTypeData="rateTypeData" :templatePanel="templatePanel"
        @closeDialog="closeDialog" ref="design"
      />
    </keep-alive>
  </div>
</template>

<script>
import './antd.css';

import printDesign from './demo/design/index'
import printCustom from './demo/custom/index'
import printTasks from './demo/tasks/index'
import printPanels from './demo/panels/index'
import templates from './demo/templates/index'
export default {
  name: 'print',
  components: { printDesign, printCustom, printTasks, printPanels, templates },
  data() {
    return {
      curDemo: 'printDesign',
      demoList: [
        { name: 'printDesign', title: '默认模板设计' }
        // { name: 'printCustom', title: '自定义设计' },
        // { name: 'printTasks', title: '队列/批量打印' },
        // { name: 'printPanels', title: '自定义模板设计' }
      ]
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight + 60
    }
  },
  props: {
    printData: {
      typeof: Object,
      default: () => {}
    },
    billType: {
      typeof: String,
      default: 'ship'
    },
    rateTypeData: { // 计费类型
      typeof: Array,
      default: () => []
    },
    templatePanel: { // 模板
      typeof: Object,
      default: () => {}
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeD')
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/bootstrap.min.css";
@import "~@/assets/css/print-lock.css";
.logos {
  padding: 6px 24px;
  display: flex;
  justify-content: center;
  align-self: center;
  img {
    height: 40px;
    width: 40px;
  }
}
.menus {
  padding: 10px 24px;
}
// hiprint 拖拽图片
.hiprint-printElement-image-content {
  img {
    content: url("~@/assets/img/1.png");
  }
}
// 修改 页眉/页脚线 样式
.hiprint-headerLine, .hiprint-footerLine {
  border-color: red !important;
}
.hiprint-headerLine:hover, .hiprint-footerLine:hover {
  border-top: 3px dashed red !important;
}
.hiprint-headerLine:hover:before {
  content: "页眉线";
  left: calc(50% - 18px);
  position: relative;
  background: #FFFF;
  top: -12px;
  color: red;
  font-size: 12px;
}
.hiprint-footerLine:hover:before {
  content: "页脚线";
  left: calc(50% - 18px);
  position: relative;
  color: red;
  background: #FFFF;
  top: -12px;
  font-size: 12px;
}
</style>